<template>
    <div>
        <breadcrumb></breadcrumb>
        <div class="box">
            <div class="head">
                <div class="title">消息中心</div>
                <el-input v-model="searchValue" placeholder="请输入内容" class="search" size="small"
                    prefix-icon="el-icon-search">
                </el-input>
            </div>
            <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
                <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
                <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
                <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
            </el-tabs> -->
            <div class="tabsBox">
                <div class="allRead" v-if="activeName == 'first'" @click="allReadEvent()">全部标记已读</div>
                <el-tabs class="tabs" v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane name="first">
                        <div slot="label">
                            <div class="tabBtn">
                                <span class="title">未读</span>
                                <div class="badge" v-if="unReadData.length != 0">
                                    <span class="num">{{ unReadData.length > 99 ? '99' : unReadData.length }}</span>
                                </div>
                            </div>
                        </div>
                        <!-- ORDER(1,"订单服务提醒"),
FLEET(2,"车队服务提醒"),
WAYBILL(3,"运单服务提醒"); -->
                        <div class="tabs_main">
                            <div class="messageBox">
                                <div class="messageItem" v-for="item in unReadData" :key="item.messageId"
                                    @click="readEvent(item.messageId)">
                                    <div class="leftArea">
                                        <i class="iconfontcolor  messageIcon"
                                            :class="item.messageType == '审核' ? 'icon-xiaoxi' : 'icon-tongzhi'"></i>
                                        <div class="redCircle"></div>
                                    </div>

                                    <div class="rightArea">
                                        <div class="rightArea_line">
                                            <div class="boldText">【{{ item.messageType }}】</div>
                                            <div class="time">{{ item.createTime }}</div>
                                        </div>
                                        <div class="rightArea_line">
                                            <span class="infoText">
                                                {{ item.content }}
                                            </span>
                                            <!-- <div class="link" v-if="item.messageType == '审核'">
                                                <i class="iconfontcolor icon-lianjie"></i>
                                                <span class="linkText" v-if="item.correspondingType==1">http:XXXXX</span>
                                                <span class="linkText" v-else-if="item.correspondingType==2">http:XXXXX</span>
                                                <span class="linkText" v-else-if="item.correspondingType==3">http:XXXXX</span>
                                            </div> -->
                                        </div>
                                    </div>

                                    <div class="delete iconfont icon-lajitong"></div>

                                </div>
                            </div>
                        </div>


                    </el-tab-pane>
                    <el-tab-pane name="second">
                        <div slot="label">
                            <div class="tabBtn">
                                <span class="title">已读</span>
                                <!-- <div class="badge" v-if="readData.length != 0">
                                    <span class="num">{{ readData.length > 99 ? '99' : readData.length }}</span>
                                </div> -->
                            </div>
                        </div>
                        <div class="tabs_main">
                            <div class="messageBox">
                                <div class="messageItem" v-for="item in readData" :key="item.messageId"
                                    @click="$router.push({ path: '/messageCenter/messageCenterList/Details', query: { messageId: item.messageId } })">
                                    <div class="leftArea">
                                        <i class="iconfontcolor  messageIcon"
                                            :class="item.messageType == '审核' ? 'icon-xiaoxi' : 'icon-tongzhi'"></i>
                                        <!-- <div class="redCircle"></div> -->
                                    </div>
                                    <div class="rightArea">
                                        <div class="rightArea_line">
                                            <div class="boldText">【{{ item.messageType }}】</div>
                                            <div class="time">{{ item.time }}</div>
                                        </div>
                                        <div class="rightArea_line">
                                            <span class="infoText">
                                                {{ item.content }}
                                            </span>
                                            <!-- <div class="link" v-if="item.messageType == '审核'">
                                                <i class="iconfontcolor icon-lianjie"></i>
                                                <span class="linkText" >http:XXXXX</span>
                                            </div> -->
                                        </div>
                                    </div>
                                    <div class="delete iconfont icon-lajitong"></div>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>


                </el-tabs>
            </div>





        </div>
    </div>
</template>

<script>
import breadcrumb from '@/components/breadcrumb.vue';
import httpApi from '@/http';
export default {
    data() {
        return {
            searchValue: "",
            activeName: "first",
            noReadNumber: "98798",//未读数量
            // messageArr: [
            //     {
            //         messageId: "100",
            //         type: "审核",
            //         time: "2023-06-12 10:12:00",
            //         url: "http:XXXXX",
            //         infoText: "您有一个新的车辆认证待处理，",
            //     },
            //     {
            //         messageId: "101",
            //         type: "审核",
            //         time: "2023-06-12 10:12:00",
            //         url: "http:XXXXX",
            //         infoText: "您有一个新的车辆认证待处理，",
            //     },
            //     {
            //         messageId: "102",
            //         type: "公告",
            //         time: "2023-06-12 10:12:00",
            //         url: "http:XXXXX",
            //         infoText: "最近由于XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
            //     }
            // ],
            unReadData: [], //未读
            readData: [],//已读

        }
    },
    methods: {
        handleClick(tab) {

            this.activeName = tab.name

        },
        allReadEvent() {
            if (this.unReadData.length == 0) {
                this.$message.warning('暂无未读消息')
                return
            }
            httpApi.loginApi.AllMessageReading({}).then(res => {
                if (res.data.code) {
                    this.$message.success('未读消息已全部已读')
                    this.getMessageList(0)
                    this.getMessageList(1)
                    console.log(this.$store.state.isNewMessage = false)
                    this.$store.state.isNewMessage = false
                }
            })
        },
        async readEvent(messageId) {
            let res = await httpApi.loginApi.messageReading({ messageId })
            if (res.data.code == 200) {
                this.getMessageList(0)
                this.getMessageList(1)

                this.$router.push({ path: '/messageCenter/messageCenterList/Details', query: { messageId: messageId } })
            }

        },
        getMessageList(type) {

            let params = {
                port_type: "coreplatform",
                read: type,   // 0未读1已读
            }
            httpApi.loginApi.getMessageNoticeAll(params).then(res => {
                console.log(res)
                if (res.data.code == 200) {
                    if (type == 0) {

                        this.unReadData = res.data.data
                        if (this.unReadData.length == 0) {
                            this.$store.state.isNewMessage = false
                        }

                    } else if (type == 1) {
                        this.readData = res.data.data
                    }
                }
            })

        }

    },
    components: {
        breadcrumb
    },
    mounted() {
        this.getMessageList(0)
        this.getMessageList(1)
    }

}
</script>

<style lang="scss" scoped>
.box {
    background-color: #fff;
    height: calc(100vh - 127px);
    padding: 0 30px;

    .head {
        height: 57px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #f0f0f0;
        margin-bottom: 16px;

        .title {
            font-size: 16px;
            color: #262626;
        }

        .search {
            width: 228px;
        }

    }

    .tabsBox {
        position: relative;

        .allRead {
            position: absolute;
            line-height: 40px;
            right: 0;
            color: #1890FF;
            font-size: 14px;
            transition: 0.2s;
            cursor: pointer;
            z-index: 200;

            &:hover {
                opacity: 0.8;
            }
        }

        .tabs {

            .tabBtn {
                width: 33px;
                height: 40px;
                position: relative;
                display: flex;
                justify-content: center;

                .title {

                    font-size: 12px;
                    font-weight: bold;
                }

                .badge {
                    position: absolute;
                    width: 24px;
                    height: 20px;
                    right: -24px;
                    top: 2px;
                    background-color: #F76F5D;
                    border-radius: 10px;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    >.num {
                        color: #fff;
                        font-size: 12px;

                    }
                }

            }

            .tabs_main {
                height: calc(100vh - 127px - 142px);
                width: 100%;

                .messageBox {
                    height: 100%;
                    overflow-y: scroll;

                    .messageItem {
                        height: 93px;
                        border-bottom: 1px solid #f0f0f0;
                        display: flex;
                        align-items: center;
                        cursor: pointer;

                        &:hover {
                            background-color: rgba($color: #ddd, $alpha: 0.5);
                        }

                        .leftArea {
                            width: 56px;
                            height: 56px;
                            position: relative;
                            margin-right: 16px;

                            .messageIcon {
                                font-size: 56px;

                            }

                            .redCircle {
                                position: absolute;
                                right: -4px;
                                top: -4px;
                                width: 8px;
                                height: 8px;
                                background-color: #F76F5D;
                                border-radius: 50%;
                            }

                        }

                        .rightArea {
                            .rightArea_line {
                                display: flex;
                                height: 18px;
                                margin-bottom: 8px;

                                .boldText {
                                    font-size: 14px;
                                    font-weight: bold;
                                    color: #262626;
                                    // width: 56px;
                                    padding: 0 auto;
                                }

                                .time {
                                    height: 16px;
                                    margin-left: 8px;
                                    font-size: 12px;
                                    color: #999999;
                                    line-height: 16px;
                                }

                                .infoText {
                                    color: #595959;
                                    font-size: 12px;
                                    line-height: 16px;
                                    margin-right: 8px;
                                }

                                .link {
                                    height: 18px;
                                    display: flex;
                                    align-items: center;
                                    cursor: pointer;
                                    transition: 0.2s;

                                    &:hover {
                                        opacity: 0.8;
                                    }

                                    .icon-lianjie {
                                        font-size: 12px;
                                        margin-right: 4px;
                                    }

                                    .linkText {
                                        color: #1890FF;
                                        font-size: 12px;
                                    }
                                }

                            }

                        }

                        .delete {
                            font-size: 24px;
                            color: #E0E0E0;
                            margin-left: auto;
                            margin-right: 10px;
                            cursor: pointer;
                            transition: 0.2s;

                            &:hover {
                                color: #1890FF;
                            }
                        }
                    }
                }
            }
        }

    }


}</style>